<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1：引入资源 -->
		<link rel="stylesheet" href="element/index.css" />
		<script src="js/vue.js"></script>
		<script src="js/axios.js"></script>
		<script src="element/index.js"></script>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			body {
				background-image: url(img/jjj.jpeg);
				background-size: 100%;
				background-repeat: no-repeat;
				/* opacity: 0.5; */
			}

			#app {
				width: 440px;
				margin: 0 auto;
				/* 	border: 1px solid #0000FF; */
				margin-top: 10%;
				border: 3px solid gray;
				border-radius: 8px;
				background-color: #ffffff;
				/* opacity: 0.6; */
			}

			.el-header {
				line-height: 50px !important;
				text-align: center;
				width: 100%;
				/* 	border: 1px solid #00FF00; */
			}

			.el-header h3 {
				display: inline-block;
			}

			.el-header img {
				width: 50px;
				height: 50px;
				vertical-align: middle;
			}

			.el-main {
				margin: 0 auto;
				width: 80%;

			}

			.el-row {
				/* height: 60px; */
				margin-bottom: 20px;
			}

			.register,
			.login,
			.login1 {
				height: 45px;
				line-height: 45px;
				font-size: 24px;
				font-family: "微软雅黑";
				font-weight: 500;
				text-align: center;
				cursor: pointer;
			}

			.register {
				background-color: #4b5961;
				color: white;
				border-radius: 5px;
			}

			.login {
				background-color: #3c424a;
				color: #9a9c9f;
			}

			.icon {
				font-size: 30px;
				color: #373739;
				background-color: #FFFFFF;
			}

			.login1 {
				background-color: #ffaaff;
				border-radius: 5px;

			}

			.login1 .el-link {
				font-size: 20px;
				color: #000000;
				line-height: 30px;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header>
					<img src="img/logo.jpeg">
					<h3>甘肃农业大学信息科学技术学院教务系统</h3>

				</el-header>
				<!-- 验证码 -->


				<!-- 表单 -->
				<el-form :model="form" ref="form" label-width="80px" class="demo-ruleForm">


					<el-form-item label="验证码" style="width: 200px;" prop="captcha">
						<img :src="captcha.img" style="width: 120px;" @click="loadcaptcha" />
						<el-input v-model="form.captcha"></el-input>
					</el-form-item>
					</el-form-item>
					<el-form-item label="用户名" style="width: 400px;" prop="userName">
						<el-input v-model="form.userName"></el-input>
					</el-form-item>
					</el-form-item>
					<el-form-item label="用户密码" style="width: 400px;" prop="password">
						<el-input v-model="form.password"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onsubmit()" @click="check()">登录</el-button>
					</el-form-item>
				</el-form>

		</div>
	</body>
</html>
<script>
	new Vue({
		el: "#app",
		data() {
			return {
				form: {
					userName: 'liumaobing',
					captcha: '',
					password: '123456'
				},
				captcha: {
					img: '',
					captchaToken: ''
				},

			};
		},
		created: function() {
			this.loadcaptcha()
		},
		methods: {
			/*********** 打开页面时，请求验证码 ***********/
			loadcaptcha() {
				axios.post('http://localhost:8080/user/captcha').then((res) => {
					console.log(res)
					this.captcha.img = res.data.img
					this.captcha.captchaToken = res.data.captchaToken
				})
			},
			/*********** 登录时，校验验证码 ***********/
			onsubmit() {
				//token 放在请求头中
				let config = {
					headers: {
						"captchaToken": this.captcha.captchaToken
					}
				};
				//axios.post(url,data,header)
				axios.post('http://localhost:8080/user/login', this.form, config).then((res) => {
					console.log(res)
					if (res.data.code !== 200) {
						this.loadcaptcha();
						return
					}
					sessionStorage.setItem("token", res.data.data.token)
					self.location = "index.html"
				})
			}
		}
	})
</script>
